<template>
    <view class="content">
        <!-- 显示问题的记录区域 -->
        <view class="question">
            <view class="item" :class="{reverse:item.role!='user'}" v-for="(item,index) in historys">
                <text>{{item.content}}</text>
                <uni-icons :type="item.role=='user'?'person':'pyq'" size="25"></uni-icons>
            </view>
        </view>
        <!-- 提问区域 -->
        <view class="word">
            <uni-easyinput class="input" v-model="word" placeholder=""></uni-easyinput>
            <view class="btn" @tap="doQuestion">提问</view>
        </view>
    </view>
</template>

<script setup>
    import { CONFIG } from '../../utils/config';
    import { ref } from 'vue'
    const word = ref("")
    const historys = ref([])
    const model = {
        "model": "moonshot-v1-8k",
        "messages": [],
        "temperature": 0.3
    }
    async function doQuestion() {
        if (word.value == '') {
            uni.showToast({
                title: '请输入问题！',
                icon: 'none'
            })
        } else {
            historys.value.push({
                "role": "user",
                "content": word.value
            })
            model.messages = historys.value
            console.log(model)
            let res = await uni.$post(CONFIG.kimi_url + '/v1/chat/completions', model)
            console.log(res)
            console.log(res.choices[0].message)
            historys.value.push(res.choices[0].message)
        }
    }
</script>

<style scoped>
/* 整体内容区域样式 */
.content {
	
    padding: 20px;
    background-color: lemonchiffon;
    display: flex;
    flex-direction: column;
    height: 80vh; /* 保持视口高度 */
	
}

/* 问题记录区域样式 */
.question {
    background-color: gold;
    border-radius: 20px;
    padding: 10px;
    flex: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 保持滚动功能 */
    max-height: none; /* 移除最大高度限制 */
}

/* 每条记录的样式 */
.item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
}

/* 用户发送的记录样式 */
.item.reverse {
    flex-direction: row-reverse;
    background-color: #e3f2fd;
}

/* 记录中的文本样式 */
.item text {
    font-size: 16px;
    margin-right: 10px;
}

/* 提问区域整体样式 */
.word {
    display: flex;
    align-items: center;

    bottom: 0; /* 底部对齐 */
    width: 100%; /* 宽度占满整个屏幕 */
    background-color: lemonchiffon; /* 与内容区域背景色一致 */
    padding: 10px 0; /* 增加与内容区域的间距 */
    z-index: 10; /* 确保在最上层 */
}

/* 输入框样式 */
.input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    font-size: 16px;
}

/* 提问按钮样式 */
.btn {
    background-color: gold;
    color: black;
    padding: 8px 15px;
    margin-left: 10px;
    border-radius: 5px;
}
</style>